<template>
	<el-image class="el-image" style="width: 60px; height: 60px" :src='logo'></el-image><br />
	<div class="base-div">
		<div>
			<el-image class="image" src='http://localhost:8082/api/assets/adImage.png' />
			<!-- <el-carousel ref="carousel" width="200px" height="400px">
				<el-carousel-item v-for="item in array" :key="item">
					<img class="img" :src="item.imagePath">
				</el-carousel-item>
			</el-carousel> -->
		</div>
		<div class="login-container" :style="{ boxShadow: `var(--el-box-shadow-light)` }">

			<el-form :rules="rules" :model="loginData" class="form-input">
				<el-form-item label="账号" prop="username" class="login-input-text">
					<el-input v-model="loginData.username">
						<template #suffix>
							<el-icon class="el-input__icon">
								<user />
							</el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password" class="login-input-text">
					<el-input type="password" @keyup.enter="login()" v-model="loginData.password"></el-input>
				</el-form-item>
				<div class="login-btn">
					<el-button type="primary" @click="register()">去注册</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<el-button type="primary" @click="login()">登录</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import logo from '@/assets/logo.png'
	// import adImage from '@/assets/adImage.png'
	import qs from 'qs'
	import storeUtil from '../utils/localstorage'
	import {
		User
	} from '@element-plus/icons-vue'
	export default {
		components: {
			user: User
		},
		name: "Login",
		data() {
			return {
				logo: logo, //logo路径
				// adImage:adImage,
				array: [],
				loginData: {},
				rules: {
					username: {
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					},
					password: {
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				}
			}
		},
		mounted() {
			// this.getAllCarousel();
		},
		methods: {
			// //查询所有轮播图
			// getAllCarousel() {
			// 	this.$axios.post('/api/carousel/getAll')
			// 		.then(data => {
			// 			this.array = data.list;
			// 			this.$refs.carousel.next();
			// 		})
			// },
			login() {
				if (!this.loginData.username) {
					// alert("");
					//已经全局加载了element-plus
					this.$message({
						message: "你还没有输入用户名"
					})
					return;
				}
				if ( !this.loginData.password) {
					// alert("");
					//已经全局加载了element-plus
					this.$message({
						message: "你还没有输入密码"
					})
					return;
				}
				/**
				 * 6次密码错误之后，此账号当天不能再登录，提示“密码错误次数太多， 请明天再试"
				 */
				let data = qs.stringify(this.loginData)
				this.$axios.post('/api/user/login', data)
					.then(data => {
						// console.log("data.user.id="+data.user.id)
						let uid = data.user.id;
						let token = data.user.token;
						storeUtil.save('uid', uid);
						storeUtil.save('token', token);
						// this.$router.push({name:'index'	,params:{key:'value'}})
						// // this.$router.push("/?key=value");
						// let id = uid;
						// this.$router.push({
						// 	path:`/${id}`,

						// })
						this.$router.push({ //方法二
							path: '/home',
							params: {
								id: data.user.id
							}
						})

						//在前端保存以上两个值，用
					}).catch(error => {
						console.log("error=" + error);
					})
			},
			register() {
				this.$router.push("/register");
			}
		}
	}
</script>

<style>
	.base-div {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
	}

	.image {
		width: 800px;
	}

	.login-container {
		position: relative;

		top: 0px;
		margin: 0 auto;
		width: 400px;
		height: 220px;
		border: gray solid 1px;
		border-radius: 5px;
	}

	.form-input {
		
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login-input-text {
		width: 300px;

	}

	.login-btn {
		margin-top: 1rem;
		display: flex;
		justify-content: center;
	}
</style>
